<template  >
  <div class="box productType">
    <!-- //表格头 -->
    <div class="box1">
      <div>
        <li><i class="el-icon-notebook-2"></i> 数据列表</li>
        <el-button plain @click="open">添加</el-button>
      </div>
    </div>

    <!-- //表格 -->
    <div class="box2">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="50" align="center">
        </el-table-column>

        <el-table-column prop="name" label="类型名称" align="center">
        </el-table-column>

        <el-table-column
          prop="attributeCount"
          label="属性数量"
          align="center"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="paramCount"
          label="参数数量"
          align="center"
          width="150"
        >
        </el-table-column>

        <el-table-column label="设置" align="center" id="change" width="300"   >
  <template slot-scope="scope">
          <el-button  plain   @click="handleEdit( scope.row)" >属性列表</el-button>

          <el-button plain  @click="handleEdit2( scope.row)" > 参数列表</el-button>
  </template >
        </el-table-column>

        <el-table-column label="操作" align="center" id="change" width="300">
  <template slot-scope="scope">
          <el-button plain @click="handleEdit3( scope.row)" >编辑</el-button>
          
          <el-button type="danger" @click="opens( scope.row)" >删除</el-button>
        </template >
          <!-- <el-button type="danger" width="30%">危险按钮  </el-button> -->
        </el-table-column>
      </el-table>
    </div>
 
      
 
 <!-- 分页功能 -->
    <div class="box3">
      <div></div>
      <div class="block">
        <span class="demonstration"></span>
       <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            
              :page-sizes="[5, 10, 15]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total= page
              >
        </el-pagination>
      </div>
    </div>
  </div>
</template>



<script>
//添加按钮
export default {


  data() {
    return {
      tableData: [{}],

      currentPage: 0,
      id: "1",
      name: "2",
      attributeCount: "",
      paramCount: "",
      pageNum: 1,
      pageSize: 5,
      type:'',
      index:"",
      page:0,
      num:'',
      names:""
      

      
    };
  },


//8个声明周期，熏染数据
  mounted() {
    let that = this;
    this.$axios
      .get("productAttribute/category/list", {
        params: {

        },
      })
      .then(function (response) {

        that.tableData = response.data.data.list;
 
        that.page = response.data.data.total;
        // that.a=that.tableData.length
 
      })
      .catch(function (error) {
  
      });
  },



  methods: {


    fn() {
      let that = this;
      this.$axios
        .get("productAttribute/category/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            
          },
        })
        .then(function (response) {
        
          that.tableData = response.data.data.list;
        
        that.page = response.data.data.total;
        })
        .catch(function (error) {
   
        });
    },


//方法，添加

    open() {
      let that=this
      this.$prompt("类型名称", "添加类型", {
        confirmButtonText: "确定", 
        cancelButtonText: "取消",
      }).then(({ value }) => {
        // console.log(value);
 
          that.$axios.post('/productAttribute/category/create/?name='+value,{
                    
          })
                  .then(function (response) {
                   this.fn()
                    // console.log(response);
                  })
                  .catch(function (error) {
                       that.fn()
                    // console.log(error);
                  });
      });

    },





//方法，点击跳转分页

    handleSizeChange(val) {
      this.pageSize = `${val}`,
       this.fn();
    },
    handleCurrentChange(val) {
      this.pageNum = `${val}`;
      this.fn();
    },
 

//删除

     opens(index, row) {
       let that = this

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           that.$axios.get('/productAttribute/category/delete/'+index.id,{
                    
          }),
          // console.log(index.id);
          that.fn()
          this.$message({       
            type: 'success',
            message: '删除成功!'
            
          }); that.fn()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });   that.fn()        
        });
      },


      // 参数
       handleEdit2(index, row) {
        //    console.log(index, row);
        // console.log(index.id);
        // console.log(index.name);
        this.num=index.id
        this.names = index.name
      
           this.$router.push({
            name:'Canshu',
            params:{
            names:index.name,
            num:index.id,
            type:1,
           productAttributeCategoryId:index.id,
           tiao:"Canshu"
            }
          })

      },

// 属性
       handleEdit(index, row) {
        // console.log(index, row);
        // console.log(index.id);
        // console.log(index.name);
        // this.num=index.id
        // this.names = index.name
      
          this.$router.push({
            name:'Shuxing',
            params:{
            names:index.name,
            num:index.id,
               type:0,
               productAttributeCategoryId:index.id,
               tiao:"Shuxing"
            }
          })

      },
      handleDelete(index, row) {
        // console.log(index, row);
        
      },
// 编辑
       handleEdit3(index, row) {
            let that=this
            // console.log(index.id);
                this.$prompt("编辑名称", "添加类型", {
                  confirmButtonText: "确定", 
                  cancelButtonText: "取消",
                  
                }).then(({ value }) => {
                  // console.log(value);
          
                    that.$axios.post('/productAttribute/category/update/'+index.id+"?name="+value,
                    {
                        

                    })
                            .then(function (response) {
                              
                            that.fn()
                              // console.log(response);
                            })
                            .catch(function (error) {
                            
                              // console.log(error);
                            });
                });



    },
  },
};
</script>




<style scoped>
li {
  list-style: none;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 2.125rem;
}
.box1 {
  font-size: 1.5625rem;
  line-height: 2.125rem;
  width:80%;
  height: 4.725rem;
  border: 1px solid #ebeef5;
  border-radius: .125rem;

  margin-bottom: 2.1875rem;
  margin-top: 1.25rem;
}
.box1 div {
  widows: 80%;
  padding: 1.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.box2 {
  width: 80%;
}
#change {
  display: flex;
  flex-wrap: nowrap;
}
.box3 {
  width: 80%;
}
.block {
  float: right;
}
a{
  list-style: none;
 text-decoration:none;
 color: black;
}
</style>